/* Copyright (c) 2024 Huawei Technologies Co., Ltd.
openFuyao is licensed under Mulan PSL v2.
You can use this software according to the terms and conditions of the Mulan PSL v2.
You may obtain a copy of Mulan PSL v2 at:
         http://license.coscl.org.cn/MulanPSL2
THIS SOFTWARE IS PROVIDED ON AN 'AS IS' BASIS, WITHOUT WARRANTIES OF ANY KIND,
EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
See the Mulan PSL v2 for more details. */
import { Modal, Button, Tabs } from 'antd';
import '@/styles/components/quickstartModal.less';
import { Fragment } from 'openinula';
import useLocalStorage from '@/hooks/useLocalStorage';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { dark } from 'react-syntax-highlighter/dist/esm/styles/prism';
/**
 * 
 * @param isQuickOpen 控制对话框打开
 * @param onCancelQuick 取消函数回调
 * @return
 */
export default function QuickStart({
  isQuickOpen,
  onCancelQuick,
}) {
  const [currentTheme, setCurrentTheme] = useLocalStorage('theme', 'light');
  const paramsYamlData1 = `  pip install -U "ray"`;
  const paramsYamlData2 =
    `  import ray
  ray.init()

  @ray.remote
  def f(x):
      return x * x

  futures = [f.remote(i) for i in range(4)]
  print(ray.get(futures)) # [0,1,4,9]  `;
  const items = [
    {
      key: '1',
      label: '什么是Ray',
      children: <div>
        <p>Ray是一个开源的统一框架，用于扩展机器学习AI和Python应用。它为并行处理提供了计算层，因此您无需成为分布式系统专家。</p>
      </div>,
    },
    {
      key: '2',
      label: '如何使用Ray',
      children: <div>
        <p className='quickstart_text'>要运行此实例，请安装RayCore：</p>
        <SyntaxHighlighter language="javascript" style={dark}>
          {paramsYamlData1}
        </SyntaxHighlighter>
        <p className='quickstart_text'>导入Ray并使用ray.init()对其进行初始化。然后用@ray.remote装饰函数，声明你想远程运行这个函数。最后，使用.remote()调用函数，而不是正常调用它。
          这个远程调用会产生一个future，一个Ray对象引用，然后你可以使用ray.get来获取它。
        </p>
        <SyntaxHighlighter language="javascript" style={dark}>
          {paramsYamlData2}
        </SyntaxHighlighter>
      </div>,
    },
  ];
  return <Modal getContainer={false} width={682} height={560} title={'欢迎使用openFuyao-Ray'} className={`modal_flex_quickstart ${currentTheme === 'dark' ? 'dark_box' : ''}`} open={isQuickOpen} onCancel={onCancelQuick} destroyOnClose
    footer={[
      <Fragment>
        <Button onClick={onCancelQuick} className='cancel_btn'>关闭</Button>
      </Fragment>,
    ]}>
    <Tabs defaultActiveKey="1" items={items} />
  </Modal>;
}